<html>

<head>
  <meta charset="utf-8">
  <title>模型动画</title>
  <script src='../w3d.js' type="text/javascript"></script>
  <script src='../config.js' type="text/javascript"></script>
  <script src='../../lib/lil-gui.umd.min.js' type="text/javascript"></script>
  <script type="text/javascript">

    let engine, scene, canvas, body, geometry, sampler, entity, pick,bus,lightObject,spotLight;
    function init() {
      canvas = document.getElementById('canvas');
      body = document.getElementById('body');
      let path = [
        `../../demo/pub/assets/skybox/twilight/pos-x.jpg`,
        `../../demo/pub/assets/skybox/twilight/neg-x.jpg`,
        `../../demo/pub/assets/skybox/twilight/pos-y.jpg`,
        `../../demo/pub/assets/skybox/twilight/neg-y.jpg`,
        `../../demo/pub/assets/skybox/twilight/pos-z.jpg`,
        `../../demo/pub/assets/skybox/twilight/neg-z.jpg`
      ]
      engine = new w.Engine({auth,
        canvas: canvas,
        contextmunu: false,//是否支持右键菜单
        background: path,
        environment: path,
        intensity: 1,
        ambientColor: "#ffffff",
        ambientIntensity: 1.0,
        enablePick: true
      });
      engine.init(this.initGPU);
    }
    function initGPU() {
      scene = engine.scene;
      scene.postProcessing.add(new w.effects.Fxaa());
      // scene.orbit.maxPitch=Math.PI/3;//限制操作相机的orbit组件的最大倾斜角度。
      initCamera();//初始化相机姿态
      // addLight();
      addMesh();//添加点
      // initGUI();
    }
    function initCamera() {
      let camera = engine.scene.getCamera()
      camera.near = 0.1;
      camera.far = 10000;
      camera.trans.position = [0, 0, 250];
      camera.pitch = Math.PI / 3;
    }
    function addMesh() {
      //添加房屋
      engine.res.gltfLoader.load(ip + '/demo/pub/assets/testmodel/OUT/out.gltf', { position: [0, 0, 17], rotation: [Math.PI / 2, 0, 0], indexedDB: true }, (gltf) => {
        engine.scene.addEntity(gltf);
        //添加公交车
        engine.res.gltfLoader.load(ip + '/demo/pub/assets/testmodel/bus.glb', { position: [13.760694412053555, -119.67986118989802, 0], rotation: [0, 0, Math.PI / 1.5], indexedDB: true }, (gltf) => {
          engine.scene.addEntity(gltf);
          bus=gltf;
          addLight();
          addAnimation();
        });
      });
    }
    function addLight(){
      spotLight = new w.light.SpotLight({
        color:"#ffffff",
        at: [13.760694412053555, -119.67986118989802, 0],
        distance:10000,
        innerRad:0,
        outerRad: Math.PI/7 ,
        intensity: 50
      });

      lightObject=new w.Object3D({position:[13.760694412053555, -119.67986118989802,1]});
      lightObject.addComponent(spotLight);
      scene.addEntity(lightObject);
    }
    function addAnimation(easing) {
      let animation = new w.animation.Animation({ id: "gltf", loop: 0 });
      //车子
      sampler = new w.animation.Sampler([0, 20], [[13.760694412053555, -119.67986118989802, 0], [157.95893734450445, -29.12556320852991,  0]], "LINEAR", easing);
      let channel = new w.animation.Channel(bus.trans, "position");
      channel.add(sampler);
      animation.add(channel);
      //聚光灯光圈范围
      const f=Math.PI/7,t=Math.PI/5;
      let rsampler = new w.animation.Sampler([0,2,4,6,8,10,12,14,16,18,20], [f,t,f,t,f,t,f,t,f,t,f], "LINEAR", easing);
      let rchannel = new w.animation.Channel(spotLight, "outerRad");
      rchannel.add(rsampler);
      animation.add(rchannel);
      //聚光灯position
      let lsampler = new w.animation.Sampler([0, 20], [[13.760694412053555, -119.67986118989802, 18], [157.95893734450445, -29.12556320852991,  18]], "LINEAR", easing);
      let lchannel = new w.animation.Channel(lightObject.trans, "position");
      lchannel.add(lsampler);
      animation.add(lchannel);
      //聚光灯at
      let atsampler = new w.animation.Sampler([0, 20], [[13.760694412053555, -119.67986118989802, 17], [157.95893734450445, -29.12556320852991,  17]], "LINEAR", easing);
      let atchannel = new w.animation.Channel(spotLight, "at");
      atchannel.add(atsampler);
      animation.add(atchannel);
      scene.addAnimation(animation);
    }

    function initGUI() {
      const GUI = lil.GUI;
      const gui = new GUI();
      let folder = gui.addFolder('animation');
      folder.add(sampler, 'rotation', easing);
    }

  </script>
  <style>
    html,
    body,
    #canvas {
      height: 100%;
      width: 100%;
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>

<body onload="init()">
  <canvas id="canvas"></canvas>
</body>

</html>